<template>
	<div class="report-wrap b-wrap">
		<div class="extension">
			<header class="storey-title">
				<div class="l-con">
					<img
						class="l-con-img"
						src="@/assets/image/recommend/推广.png"
						alt=""
					/>
					<div class="name">{{ report.reportName }}</div>
					<div class="text-info">
						<i class="iconfont icon-huo"></i>
						{{ report.detail }}
					</div>
				</div>
			</header>

			<div class="ext-box">
				<CardCommon
					v-for="(rItem, index) in report.reportList"
					:key="index"
					:cardCommon="rItem"
				/>
			</div>
		</div>
	</div>
</template>

<script>
import CardCommon from "../cardCommon";
export default {
	// 分类的列表组件
	name: "ReportWrap",
	props: {
		report: {
			type: Object,
			require: true,
		},
	},
	components: {
		CardCommon,
	},
};
</script>

<style lang="less">
.b-wrap {
	width: 1198px;
	// height: 526px;
	margin: 0 auto;
	box-sizing: border-box;
}
.report-wrap {
	display: flex;

	// justify-content: space-between;
	.extension {
		width: 100%;
		margin-bottom: 56px;
		.storey-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16px;
			height: 36;
			.l-con {
				display: flex;
				img {
					width: 36px;
					height: 36px;
					vertical-align: middle;
				}
				.name {
					margin-right: 20px;
					vertical-align: bottom;
					font-size: 20px;
					line-height: 36px;
					color: #212121;
					cursor: default;
				}
				.text-info {
					line-height: 36px;
					a {
						color: #505050;
						font-size: 12px;
					}
					.iconfont {
						color: red;
					}
				}
			}
		}
		.ext-box {
			display: flex;
			// justify-content: space-around;
		}
	}
}
</style>
